<template>
  <div id="Logistics" >
    <div class="linetxt">
      <img src="../assets/images/logi-logo.png">
      <p>为保证您顺利收货</p><p>请填写真实姓名和详细地址</p>
      <p>如有疑问联系400-070-6099</p>
    </div>
    <group labelAlign="right" labelWidth="70px" labelMarginRight="5px">
      <x-input title="姓名" placeholder="请填写真实姓名" required="required" v-model="Name"></x-input>
      <x-input title="手机号" placeholder="请填写手机号" v-model="inputphone" is-type="china-mobile" ref="input01"></x-input>
      <x-address title="所在地区" placeholder="请选择所在地区" :list="ChinaAddressData" value-text-align="left" v-model="addresslist" @on-shadow-change="onShadowChange" @on-hide="logHide"></x-address>
      <div class="vux-x-input weui-cell">
        <div class="weui-cell__hd"><!---->
          <label class="weui-label" style="width: 70px; text-align: right; margin-right: 5px;">详细地址</label>
        </div>
        <div class="weui-cell__bd weui-cell__primary">
          <input autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" type="text" placeholder="请填写街道、小区门牌号等" v-model='DetAddress' class="weui-input">
        </div>
      </div>
    </group>
    <box gap="20px 20px">
      <x-button type="primary" action-type="button" @click.native="Validform">保存</x-button>
    </box>
  </div>

</template>

<script>
import Box from 'vux/src/components/box'
import XInput from 'vux/src/components/x-input'
import XButton from 'vux/src/components/x-button'
import Group from 'vux/src/components/group'
import Selector from 'vux/src/components/selector'
import Datetime from 'vux/src/components/datetime'
import XAddress from 'vux/src/components/x-address'
import { ChinaAddressV3Data, Value2nameFilter as value2name } from 'vux'

export default {
  name: 'Logistics',
  components: {
    Box,
    XInput,
    XButton,
    Group,
    Selector,
    Datetime,
    XAddress,
    ChinaAddressV3Data
  },
  data () {
    return {
      inputphone: '',
      Name: '',
      adrnumslist: [],
      adrnameslist: [],
      addresslist: [],
      DetAddress: '',
      ChinaAddressData: ChinaAddressV3Data
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.$axios.post(this.apidomain + '/api/integralMall/addressMaintain/' + this.getCookie('appid'), {
        openId: this.getCookie('openid'),
        province: '',
        city: '',
        district: '',
        name: '',
        phone: '',
        address: ''
      })
      .then((response) => {
        this.Name = response.data.data.name
        this.inputphone = response.data.data.phone
        this.DetAddress = response.data.data.address
        const onceaddress = [response.data.data.province, response.data.data.city, response.data.data.district]
        if (response.data.data.province !== '' || response.data.data.city !== '' || response.data.data.district !== '') {
          this.addresslist = onceaddress
        }
      })
      .catch(function (error) {
        console.log(error)
      })
    },
    Validform () {
      if (this.$data.Name !== '' && this.$data.addresslist.length === 3 && this.$data.DetAddress !== '' && this.$data.inputphone !== '') {
        this.$axios.post(this.apidomain + '/api/integralMall/addressMaintain/' + this.getCookie('appid'), {
          openId: this.getCookie('openid'),
          name: this.Name,
          phone: this.inputphone,
          address: this.DetAddress,
          province: this.addresslist[0] || '',
          city: this.addresslist[1] || '',
          district: this.addresslist[2] || ''
        })
        .then((response) => {
          this.$router.go(-1)
        })
        .catch(function (error) {
          console.log(error)
        })
      } else {
        window.alert('信息不完整')
      }
    },
    onShadowChange (ids, names) {
      this.adrnumslist = ids
      this.adrnameslist = names
    },
    getName (value) {
      return value2name(value, ChinaAddressV3Data)
    },
    logHide (issure) {
      if (issure) { // 确定按钮
        this.addresslist = this.adrnumslist
      }
    }
  }
}
</script>
<style lang="less">
  @import "../assets/less/order/logistics.less";
</style>
